<script lang="ts" setup>
import { ref, watch } from 'vue';

import { InputNumber as AInputNumber } from 'ant-design-vue';

const props = defineProps({
  // v-model 绑定的值，一个包含两个元素的数组 [start, end]
  value: {
    type: Array as () => (null | number | undefined)[],
    default: () => [undefined, undefined],
  },
  // 可选的自定义占位符
  startPlaceholder: {
    type: String,
    default: '最小值',
  },
  endPlaceholder: {
    type: String,
    default: '最大值',
  },
});

const emit = defineEmits(['update:value']);

const startValue = ref<null | number | undefined>();
const endValue = ref<null | number | undefined>();

// 监听从外部传入的 value prop，并同步到组件内部状态
watch(
  () => props.value,
  (newValue) => {
    const [start, end] = newValue || [undefined, undefined];
    startValue.value = start;
    endValue.value = end;
  },
  { immediate: true },
);

// 当内部任一输入框的值改变时，通过 emit 事件更新外部的 v-model
function handleChange() {
  emit('update:value', [startValue.value, endValue.value]);
}
</script>

<template>
  <div class="range-number-container">
    <AInputNumber
      v-model:value="startValue"
      :placeholder="startPlaceholder"
      class="range-input"
      :controls="false"
      @change="handleChange"
    />
    <span class="range-separator">-</span>
    <AInputNumber
      v-model:value="endValue"
      :placeholder="endPlaceholder"
      class="range-input"
      :controls="false"
      @change="handleChange"
    />
  </div>
</template>

<style scoped>
.range-number-container {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 6px; /* antdv4 默认圆角 */
  transition: all 0.2s;
}

.range-number-container:hover {
  border-color: #4096ff;
}

.range-input {
  flex: 1;
  text-align: center;
  border: none !important;
  box-shadow: none !important;
}

.range-separator {
  padding: 0 8px;
  color: #999;
}
</style>
